<template>
  <div>
    <div class="filter-bar">
      <text :class="['filter-bar-item', param.sort == 'NONE' && 'filter-bar-item-active']"
            sort="NONE" @click="sort">综合</text>
      <text :class="['filter-bar-item', param.sort == 'LIST_TIME_DESC' && 'filter-bar-item-active']"
            sort="LIST_TIME_DESC"
            v-if="(searchFrom=='SITE' || searchFrom=='')"
            @click="sort">最新</text>
      <text :class="['filter-bar-item', param.sort == 'COMMISSION_VALUE_DESC' && 'filter-bar-item-active']"
            sort="COMMISSION_VALUE_DESC"
            v-if="searchFrom!='JD'"
            @click="sort">最赚</text>
      <text :class="['filter-bar-item', param.sort == 'SALES_DESC' && 'filter-bar-item-active']" sort="SALES_DESC"
            v-if="searchFrom!='JD'"
            @click="sort">销量</text>
      <div @click="sort" class="filter-bar-item" v-if="searchFrom!='JD'" sortType="PRICE">
        <text
            :class="['sort-item-price', (param.sort == 'PRICE_ASC' || param.sort == 'PRICE_DESC') && 'filter-bar-item-active']">价格</text>
        <div class="sort-price-carets">
          <text :class="['icon', 'sort-icon', param.sort == 'PRICE_ASC' && 'filter-bar-item-active']">&#xe78f;</text>
          <text :class="['icon', 'sort-icon', param.sort == 'PRICE_DESC' && 'filter-bar-item-active']">&#xe791;</text>
        </div>
      </div>
      <div class="filter-op-item" @click="toggleFilterPanel">
        <text class="filter-op-item-text">筛选</text>
        <text class="filter-op-item-icon icon">&#xe69c;</text>
      </div>
      <div class="filter-layout-item" @click="toggleLayout">
        <text class="filter-layout-item-icon icon" v-if="iLayout=='list'">&#xe60b;</text>
        <text class="filter-layout-item-icon icon" v-if="iLayout=='grid'">&#xe60e;</text>
      </div>
    </div>
    <div :class="['filter-panel', filterPanelBgShown && 'filter-panel-bg-shown']"
         v-if="filterPanelShown"
         @click="toggleFilterPanel">
      <div :class="['filter-panel-body']">
        <list>
          <cell>
            <div class="filter-panel-box-body">
              <searchbar class="flex-1" v-model="param.keywords" placeholder="输入关键字搜索宝贝"></searchbar>
            </div>
          </cell>
          <header>
            <text class="filter-panel-box-head">价格区间（元）</text>
          </header>
          <cell>
            <div class="filter-panel-box-body">
              <div class="filter-panel-price-range">
                <input placeholder="最低价" type="number" v-model="param.startPrice" value=""
                       class="filter-panel-price-range-input"/>
                <text class="filter-panel-price-range-line">-</text>
                <input placeholder="最高价" v-model="param.endPrice" class="filter-panel-price-range-input" type="number"/>
              </div>
            </div>
          </cell>
          <header v-if="((searchFrom=='SITE' || searchFrom == '') && !hideEcomPlat)">
            <text class="filter-panel-box-head">商城</text>
          </header>
          <cell v-if="((searchFrom=='SITE' || searchFrom == '' ) && !hideEcomPlat)">
            <div class="filter-panel-box-body sift-list">
              <div :class="['sift-list-row', idx == 0 && 'margin-top-0']" v-for="(list, idx) in ecomPlatRows" v-bind:key="idx">
                <div v-for="ecomPlat in list" v-bind:key="ecomPlat"
                     :class="['sift-list-item', param.ecomPlat == ecomPlat.value && 'sift-list-item-active', ecomPlat.title || 'sift-list-item-hide']"
                     @click="selectEcomPlat" :ecomPlat="ecomPlat.value">
                  <text
                      :class="['icon', 'sift-list-item-icon', param.ecomPlat == ecomPlat.value && 'sift-list-item-icon-active']"
                      v-if="param.ecomPlat == ecomPlat.value">&#xe645;</text>
                  <text
                      :class="['sift-list-item-text', param.ecomPlat == ecomPlat.value && 'sift-list-item-text-active']">{{ecomPlat.title}}</text>
                </div>
              </div>
            </div>
          </cell>
          <header v-if="searchFrom!='JD'">
            <text class="filter-panel-box-head">其他</text>
          </header>
          <cell v-if="searchFrom!='JD' && searchFrom !==  'PDD'">
            <div class="filter-panel-box-body sift-list">
              <div :class="['sift-list-row','margin-top-0']">
                <div :class="['sift-list-item', param.freeShipment && 'sift-list-item-active']"
                     @click="toggleFreeShipment">
                  <text :class="['icon', 'sift-list-item-icon', param.freeShipment && 'sift-list-item-icon-active']"
                      v-if="param.freeShipment">&#xe645;</text>
                  <text
                      :class="['sift-list-item-text', param.freeShipment && 'sift-list-item-text-active']">包邮</text>
                </div>
                <div class="sift-list-item" style="opacity: 0"></div>
                <div class="sift-list-item" style="opacity: 0"></div>
              </div>
            </div>
          </cell>
        </list>
        <div class="filter-panel-btns">
          <text class="filter-panel-btn" @click="reset">重置</text>
          <text class="filter-panel-btn filter-panel-btn-ok" @click="okClick">确定</text>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
let api = require('../include/api')
let grouping = require('../include/grouping')
let Deferred = require('Deferred')
require('../include/page-xdom')
module.exports = {
  mixins: [
  ],
  components: {
    'searchbar': require('./searchbar.vue')
  },
  props: {
    param: {
      default: {
        sort: 'NONE',
        keywords: '',
        ecomPlat: '',
        startPrice: '',
        endPrice: '',
        freeShipment: false
      }
    },
    hideEcomPlat: {default: false},
    searchFrom: {
      default: 'SITE'
    },
    layout: {
      default: 'list'
    }
  },
  data () {
    return {
      filterPanelShown: false,
      filterPanelBgShown: false,
      defaultParam: {},
      ecomPlatRows: [],
      filterPanelStyle: {
        transform: 'translateX(100%)',
        width: 0
      },
      iLayout: 'list',
      ecomPlatList: [
        {title: '全部', value: ''}
      ]
    }
  },
  created () {
    this.filterPanelStyle.width = 750 * 4 / 5
    this.iLayout = this.layout
    this.filterPanelStyle.transform = 'translateX(' + this.filterPanelStyle.width + ')'
    Object.assign(this.defaultParam, this.param)
    api.enums.ecomPlat().done(rs => {
      let data = rs.data
      data.forEach(ec => {
        this.ecomPlatList.push(ec)
      })
      this.ecomPlatRows = grouping(this.ecomPlatList, 3, {})
    })
  },
  methods: {
    toggleFilterPanel () {
      var deferred = new Deferred()
      if (!this.filterPanelShown) {
        this.filterPanelShown = true
        setTimeout(() => {
          this.filterPanelBgShown = true
          this.filterPanelStyle.transform = 'translateX(0)'
          deferred.resolve()
        }, 1)
      } else {
        this.filterPanelBgShown = false
        this.filterPanelStyle.transform = 'translateX(' + this.filterPanelStyle.width + ')'
        setTimeout(() => {
          this.filterPanelShown = false
          deferred.resolve()
        }, 200)
      }
      return deferred.promise()
    },
    toggleLayout () {
      if (this.iLayout === 'list') {
        this.iLayout = 'grid'
      } else {
        this.iLayout = 'list'
      }
      this.$emit('layout', this.iLayout)
    },
    sort (event) {
      let target = event.target
      let sort = target.attr.sort
      // weex.requireModule('modal').alert({message: JSON.stringify(target.attr)})
      if (target.attr.sortType === 'PRICE') {
        sort = this.param.sort === 'PRICE_DESC' ? 'PRICE_ASC' : 'PRICE_DESC'
      }
      this.param.sort = sort
      this.change()
    },
    change () {
      this.$emit('change', this.param)
    },
    okClick () {
      this.toggleFilterPanel().done(() => {
        this.change()
      })
    },
    reset () {
      Object.assign(this.param, this.defaultParam)
      this.$emit('reset')
      // this.change()
    },
    selectEcomPlat (e) {
      let ecomPlat = e.target.attr.ecomPlat
      this.param.ecomPlat = ecomPlat
    },
    toggleFreeShipment () {
      this.param.freeShipment = !this.param.freeShipment
    }
  }
}
</script>
<style lang="scss">
  @import '../sass/mixin';
  @import "../sass/icon";
  @import "../sass/utilities";
  @import "../sass/var";

  $filter-bar-height: 70px;
  $font-size: 28px;
  $item-color: $color-gray;
  .filter-bar {
    flex-direction: row;
    align-items: center;
    @include border-bottom(1px, solid, #ddd);
    @include border-top(1px, solid, #ddd);
    background-color: #fff;
    color: $item-color;
    &-item {
      flex: 1;
      justify-content: center;
      align-items: center;
      height: $filter-bar-height;
      text-align: center;
      line-height: $filter-bar-height;
      font-size: $font-size;
      flex-direction: row;
      color: $item-color;
      &-icon {
        font-size: $font-size;
        color: $item-color;
      }
      &-active {
        color: $color-primary;
      }
    }

    &-types {
      align-items: center;
      padding: 0 10px;
      &-item {
        align-items: center;
        justify-content: center;
      }
    }
  }

  .sort-icon {
    font-size: 14px;
    color: #cbcbcb;
    height: 14px;
    line-height: 14px;
  }

  .sort-item-price {
    font-size: $font-size;
    color: $item-color;
  }

  .sort-price-carets {
    margin-left: 5px;
    height: 60px;
    color: $color-muted;
    justify-content: center;
    align-items: center;
  }

  .filter-op-item {
    width: 120px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    height: $filter-bar-height;
    @include border-left(1, solid, #ddd);
    &-text {
      font-size: $font-size;
      color: $item-color;
      font-weight: lighter;
    }
    &-icon {
      font-size: $font-size;
      color: $item-color;
      font-weight: lighter;
    }
  }

  .filter-op-item {
    width: 120px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    height: $filter-bar-height;
    @include border-left(1px, solid, #ddd);
    &-text {
      font-size: $font-size;
      color: $item-color;
      font-weight: lighter;
    }
    &-icon {
      font-size: $font-size;
      color: $item-color;
      font-weight: lighter;
    }
  }

  .filter-layout-item {
    width: 80px;
    justify-content: center;
    flex-direction: row;
    align-items: center;
    height: $filter-bar-height;
    @include border-left(1px, solid, #ddd);
    &-icon {
      font-size: 46px;
      color: $item-color;
      font-weight: lighter;
    }
  }

  .filter-panel {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: 100;
    $bottom-height: 80px;
    $width: 500px;
    font-size: 24px;
    background-color: transparent;
    transition: backgroundColor,transform .2s linear;
    &-bg-shown {
      background-color: rgba(0, 0, 0, 0.7);
    }
    &-body {
      width: $width;
      background-color: #FFFFFF;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      padding-top: 40px;
      transition: transform .2s linear;
      /*transform: translateX(100%);*/
      /*&-show {*/
        /*transform: translateX(0);*/
      /*}*/
    }
    &-content {
      position: absolute;
      top: 0;
      right: 0;
      bottom: $bottom-height;
      left: 0;
    }
    &-btns {
      height: $bottom-height;
      background-color: #000;
      position: absolute;
      bottom: 0;
      right: 0;
      left: 0;
      display: flex;
      flex-direction: row;
      align-items: stretch;
    }
    &-btn {
      height: $bottom-height;
      line-height: $bottom-height;
      flex: 1;
      text-align: center;
      background-color: #FD9F28;
      color: #fff;
      font-size: 36px;
      &-ok {
        background-color: #FB4748;
      }
    }
    &-box {
      @include border-bottom(1, solid, #ddd);
      &-head {
        color: $color;
        padding: 20px 20px 0;
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        font-size: 32px;
        background-color: #ffffff;
      }
      &-body {
        padding: 20px;
        @include border-bottom(1, solid, #ddd);
      }
    }
    &-price-range {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      &-input {
        width: 200px;
        @include border(1, solid, #ddd);
        text-align: center;
        height: 56px;
        line-height: 56px;
        font-size: 28px;
        border-radius: 8px;
        color: $color;
      }
      &-line {
        font-size: 40px;
        color: $color-muted;
      }
    }
  }

  .margin-top-0 {
    margin-top: 0
  }

  .sift-list {
    padding-left: 10px;
    padding-right: 10px;
    &-row {
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
    }
    &-item {
      flex: 1;
      margin: 0 10px;
      background-color: #F0F0F0;
      height: 60px;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      flex-direction: row;
      &-hide {
        opacity: 0;
      }
      &-text {
        color: #3B3B3B;
        font-size: 28px;
        &-active {
          color: #FC6435;
        }
      }
      &-icon {
        margin-right: 5px;
        &-active {
          color: #FC6435;
        }
      }
      &-active {
        background-color: #FFEEE6;
        color: #FC6435;
      }
    }
  }

</style>
